<!--  -->
<template>
  <div class='cityConfigArea'>
    <div class="cityConfigArea_circleLine" v-for="(item,key,index) in allSelectList"
      :key="index">
      <span class="cityConfigArea_alertMess">{{key}}</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="circleLineAdd(key)">新增</Button>
      <div>
        <span v-for="val in item" :key="val.id" class="cityConfigArea_circleLine_span"
          @mouseover="$set(val,'hover',true)" @mouseleave="$set(val,'hover',false)">
          {{val.baseTagsName}}
          <span v-if="val.hover"
            class="cityConfigArea_circleLine_spanMess flex flex-horizontal-between">
            <Icon class="cityConfigArea_circleLine_edit" color="white" size="22"
              @click.stop="circleLineUpdate(val)" type="md-settings" />
            <Icon class="cityConfigArea_circleLine_delete" color="red" size="22"
              @click.stop="deleMoreSpan(val)" type="md-close" />
          </span>
        </span>
      </div>
    </div>
    <!-- 新增 -->
    <Modal v-model="addMoreModal" width="500" title="新增" :footer-hide='true'>
      <div>
        <Form ref="formValidate" :model="addMoreMess" :rules="ruleValidate" :label-width="120">
          <FormItem label="标签名称" prop="baseTagsName">
            <Input type="text" v-model="addMoreMess.baseTagsName" placeholder="请输入模块名字"
              class="cityConfigArea_moudle_select"></Input>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="addMoreModal = false">取消</Button>
            <Button type="primary" @click="addMoreSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'
  export default {
    components: { draggable },
    data() {
      const ruleValidateCodeList = (rule, data, callback) => {
        console.log(65656)
        if (data.length < 1) return callback('请至少选择一个')
        callback()
      }

      return {
        allSelectList: {
          楼盘特色: [],
          户型特色: [],
          地产类型: [],
          建筑类别: [],
          其他特色: [],
        },
        tagNames: ['楼盘特色', '户型特色', '地产类型', '建筑类别', '其他特色'],
        addMoreMess: {
          baseTagsName: '',
          baseTagsType: '',
        },
        addMoreModal: false,
        ruleValidate: {
          baseTagsName: [
            { required: true, message: '请填写标签名称', trigger: 'blur' },
          ],
        },
        currentMess: {
          list: [],
        },
        checkMoudle: false,
        checkMoudleError: false,
        checkMoudleErrorMess: '',
        MoreSelectList: [],
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取列表
      getAllSelectList() {
        generalConfiguration.citytagList({
          cityCode: this.$route.query.code,
          baseTagsType: 1,
        }).then((res) => {
          console.log('获取列表', res)
          let mess = {
            buildingFeature: '楼盘特色',
            houseTypeFeature: '户型特色',
            propertyType: '地产类型',
            buildingType: '建筑类别',
            otherFeature: '其他特色',
          }
          for (const key in res) {
            if (res.hasOwnProperty(key)) {
              this.allSelectList[mess[key]] = res[key]
            }
          }
          //   res.list.map(item=>{
          //      let name = item.tagType>4?this.tagNames[4]:this.tagNames[item.tagType-1];
          //      mess[name].push(item);
          //   })
          //   this.allSelectList = mess;
          //  console.log(mess)
        })
      },

      //点击新增确认按钮
      addMoreSubmit(mess) {
        console.log(999, mess)
        this.$refs[mess].validate((valid) => {
          if (valid) {
            this.addMoreMess.cityCode = this.cityCode
            console.log(this.addMoreMess)
            this.addMoreMess.baseTagsId ?
              generalConfiguration.citytagUpdate({
                baseTagsId: this.addMoreMess.baseTagsId,
                cityCode: this.cityCode,
                baseTagsName: this.addMoreMess.baseTagsName,
              }).then((res) => {
                this.$Message.success('修改成功')
                this.getAllSelectList()
              }) :
              generalConfiguration.citytagCreate(this.addMoreMess).then((res) => {
                console.log('添加成功', res)
                this.$Message.success('添加成功')
                this.getAllSelectList()
              })
            this.addMoreModal = false;
            (this.addMoreMess = { baseTagsName: '', baseTagsType: '' }),
            this.$refs[name].resetFields()
          }
        })
      },
      //点击新增按钮
      circleLineAdd(name, mess) {
        console.log(mess)
        this.addMoreMess.baseTagsType =
          this.tagNames.findIndex((item) => item == name) + 1
        mess
          ?
          (this.addMoreMess.tagId = mess.id) &&
          (this.addMoreMess.baseTagsName = mess.baseTagsName) :
          (this.addMoreMess.baseTagsName = '')
        this.addMoreModal = true
      },
      //修改
      circleLineUpdate(mess) {
        this.addMoreMess = this.$tool.deepClone(mess)
        this.addMoreModal = true
      },
      //删除某一个span标签
      deleMoreSpan(mess) {
        generalConfiguration.citytagDelete({ baseTagsId: mess.baseTagsId }).then((res) => {
          this.$Message.success('删除成功')
          this.getAllSelectList()
        })
      },
    },
    beforeCreate() {
      this.cityCode = this.$route.query.code
    },
    created() {
      this.getAllSelectList()
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .cityConfigArea {
    &_circleLine {
      box-shadow: 0px 0px 6px 0px rgba(116, 119, 121, 0.2);
      padding: 8px;
      margin: 20px 0;
      background-color: #f8f8f9;

      &_span {
        border: 1px solid #ccc;
        padding: 6px 20px;
        margin-right: 8px;
        border-radius: 4px;
        margin-bottom: 9px;
        display: inline-block;
        position: relative;
      }

      &_spanMess {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        text-align: center;
        line-height: 35px;
        border-radius: 4px;
        padding: 5px 7px;
        cursor: pointer;
      }

      &_edit {
        float: left;
      }

      &_delete {
        float: right;
      }
    }

    &_alertMess {
      font-size: 16px;
      font-weight: 700;
      float: left;
      margin-top: 6px;

      .red {
        color: red;
      }
    }

    &_alertMessButton {
      margin: 0 8px 25px 8px;
    }

    &_moudle_select {
      width: 306px;
      margin-right: 10px;
    }

    &_moudle_inputList {
      margin-bottom: 10px;
    }

    &_moudle_icon {
      vertical-align: text-top;
    }

    .pagePublicStyle {
      text-align: right;
      padding: 14px 0;
      margin-right: 30px;
    }

    .totalCount {
      float: left;
      line-height: 34px;
      padding-left: 20px;
    }
  }

  .cityList_moudle_footer {
    ::v-deep .ivu-form-item-content {
      text-align: right;
      margin-right: 42px;
    }
  }

  .cityConfigArea_cancelButton {
    margin-right: 6px;
  }

  .circleLineModal {
    &_select {
      width: 200px;
      margin-bottom: 10px;
    }

    &_footer {
      border-top: 1px solid #ccc;
      margin-top: 6px;
      padding-top: 8px;
    }

    &_cut {
      font-size: 22px;
      display: inline-block;
      margin-right: 8px;
    }

    &_name,
    &_unit {
      vertical-align: middle;
      height: 32px;
      display: inline-block;
    }

    &_unit {
      margin-right: 10px;
    }

    &_errorMess {
      font-size: 12px;
      color: red;
      font-weight: 700;
      margin-left: 40px;
    }
  }
</style>